<template>
  <f7-list-input
    :label="label"
    :type="inputType"
    :placeholder="placeholder"
    :clear-button="isEdit"
    :readonly="!isEdit"
    :value="inputValue"
    @input="inputValue = $event.target.value"
    :input-id="inputId"
  />
</template>

<script type="text/ecmascript-6">
  import * as MyF7 from '@/common/F7DomComponents'

  export default {
    props: {
      inputId: {
        type: String,
        default: '',
        required: true
      },
      label: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: ''
      },
      isEdit: {
        type: Boolean,
        default: false
      },
      dictType: {
        type: String,
        default: ''
      },
      value: {
        default: ''
      }
    },
    data() {
      return {
        inputValue: this.value
      }
    },
    mounted() {
      console.log(this.value)
      if (this.type === 'picker' && this.isEdit) {
        MyF7.picker(`#${this.inputId}`)
      }
    },
    computed: {
      inputType() {
        return this.type === 'picker' ? 'text' : this.type
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
